<template>
  <div style="width: 100%">
    <i-input v-model="data.name" placeholder="文件名" clearable></i-input>
    <Upload
      multiple
      type="drag"
      :action="`${API}work/upload`"
      :data="data"
      name="files"
      :on-success="success">
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖动上传</p>
      </div>
    </Upload>

    <div v-if="list.length > 0" class="list">
      <div v-for="(item, index) in list" :key="index" class="item" @click="img(item)">
        <img :src="`${imgUrl}${item.path}`">
        <p v-if="item.name !== null && item.name !== ''">{{item.name}}</p>
      </div>
    </div>

    <Modal v-model="showImg" width="80">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>{{imgObj.name}}</span>
      </p>
      <div style="text-align:center">
        <img :src="`${imgUrl}${imgObj.path}`" width="100%" height="auto">
      </div>
      <div slot="footer">
        <Button type="error" size="large" @click="show">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      API: process.env.API,
      data: {
        name: '',
      },
      list: [],
      imgUrl: process.env.FILE_API,
      showImg: false,
      imgObj: {},
    };
  },
  computed: {},
  watch: {},
  methods: {
    success() {
      this.$Message.success('上传成功');
      this.getFiles();
    },
    getFiles() {
      this.$axios.get('work/files_list', { params: { start: 1, limit: 30 } }).then((res) => {
        this.list = res;
      });
    },
    show() {
      this.showImg = !this.showImg;
    },
    img(item) {
      this.imgObj = item;
      this.show();
    },
  },
  beforeCreated() {
  },
  created() {
    this.getFiles();
  },
  mounted() {
  },
  components: {},
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  .list
    .item
      display inline-block
      position relative
      margin-right 20px
      cursor pointer
      &:hover p
        opacity 1
        transition all 0.2s linear
      img
        width 120px
        height 80px
        background #f6f6f6
      p
        position absolute
        left 0
        right 0
        background rgba(0,0,0,0.3)
        height 20px
        line-height 20px
        color #fff
        bottom 5px
        text-align center
        opacity 0
        transition all 0.2s linear
</style>
